<template>
<div  :class="['step-item', link ? 'linkable' : null]">
  <span :style="titleStyle">{{title}}</span>
  <Icon :style="iconStyle" :type="icon" />
  <slot></slot>
</div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .step-item{
    cursor: pointer;
  }
  :global{
    .ant-steps-item-process{
      .linkable{
        color: #40a9ff;
      }
    }
  }
</style>
<script type="text/ecmascript-6">
  const Group = {
    name: 'AStepItemGroup',
    render (h) {
      return h(
        'div',
        {attrs: {style: 'text-align: center; margin-top: 8px'}},
        [h('div', {attrs: {style: 'text-align: left; display: inline-block;'}}, [this.$slots.default])]
      )
    }
  }
    export default {
      name: 'AStepItem',
      Group: Group,
      props: ['title', 'icon', 'link', 'titleStyle', 'iconStyle'],
        data() {
            return {};
        },
        methods: {},
        created() {

        },
        components: {}
    }
</script>
